<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>应急视频信息税收动态监控应用</title>
    <script type="text/javascript" src="/visual/js/jquery.js"></script>
    <script
      type="text/javascript"
      src="/visual/js/lightbox.min.js"
    ></script>

    <link rel="stylesheet" href="/visual/css/comon0.css" />
    <link rel="stylesheet" href="/visual/css/main_visual.css" />
    <link rel="stylesheet" href="/visual/css/lightbox.min.css" />

    <link rel="stylesheet" href="/layui/css/layui.css" />
    <link rel="stylesheet" href="/css/custom.form.css" />
    <!-- <link
      rel="stylesheet"
      href="/visual/bstable/css/bootstrap.min.css"
    /> -->
  </head>
  <script>
    $(window).load(function () {
      $(".loading").fadeOut();
    });
    $(function () {
      $(".myscroll").myScroll({
        speed: 60, //数值越大，速度越慢
        rowHeight: 38, //li的高度
      });
    });
    /****/
    $(document).ready(function () {
      var whei = $(window).width();
      $("html").css({ fontSize: whei / 20 });
      $(window).resize(function () {
        var whei = $(window).width();
        $("html").css({ fontSize: whei / 20 });
      });
    });
  </script>
  <script
    type="text/javascript"
    src="/visual/js/echarts.min.js"
  ></script>
  <script language="JavaScript" src="/visual/js/js.js"></script>
  <script type="text/javascript" src="/visual/js/china.js"></script>

  <script
    type="text/javascript"
    src="/visual/js/area_echarts.js"
  ></script>
  <script
    type="text/javascript"
    src="/visual/js/fontscroll.js"
  ></script>

  <script src="/layui/layui.all.js"></script>
  <script src="/js/core.util.js"></script>
  <body>
    <div class="container-main">
      <div class="header">
        <h1>应急视频信息税收动态监控应用</h1>
        <div class="header-l">
          <input class="input" type="text" placeholder="请输入企业名称/税号 " />
          <img src="/visual/images/icon_search.png" alt="" />
        </div>

        <div>
          <select id="industry" class="input">
            <option>请选择行业</option>
            <option>采矿</option>
            <option>选矿</option>
            <option>水泥</option>
            <option>混凝土</option>
          </select>
          <input
            type="text"
            id="createTimeInput"
            class="input"
            placeholder="请输入时间范围"
          />

          <button style="cursor:pointer" class="input" onclick="cx()">
            <span class="glyphicon glyphicon-search"></span>查询
          </button>
        </div>
      </div>
      <div class="content-main">
        <div class="left-box">
          <!-- 监控展示 -->
          <div class="monitor">
            <div class="common-title">监控展示</div>
            <div class="common-box">
              <div class="monitor-cont" id="carouselImageListId">
                
              	<a href="http://127.0.0.1/files/20250521/02a568e4ca9044f985fd19eb157ed515.jpeg" data-lightbox="image-1" data-title="我的标题">
	        		<img alt="唐山燕东水泥股份有限公司_2025-05-28 19:22:23" class="carousel" src="http://127.0.0.1/files/20250521/02a568e4ca9044f985fd19eb157ed515.jpeg" style="width: 100%;height: 1.4rem">
	    		</a>
              	
                <!-- <div>
                  <img src="/visual/images/video.png" alt="" />
                </div>
                <div>
                  <img src="/visual/images/video.png" alt="" />
                </div> -->
              </div>
              <div class="enterprise">
                <img src="/visual/images/icon_prev.png" alt="" />
                <div>
                  <p id="imgName">唐山燕东水泥股份有限公司</p>
                  <span id="imgTime">时间:2025-05-28 19:22:23</span>
                </div>
                <img src="/visual/images/icon_next.png" alt="" />
              </div>
            </div>
          </div>
          <!-- 企业预警消息 -->
          <div class="early-warning">
            <div class="common-title">企业预警消息</div>
            <div class="common-box">
              <div id="FontScroll" class="wrap myscroll">
                <ul id="warningListId">
                </ul>
              </div>
            </div>
          </div>
          <!-- 行业汇总统计 -->
          <div class="summary">
            <div class="common-title">行业汇总统计</div>
            <div class="common-box">
              <ul>
                <li class="theader">
                  <p>行业</p>
                  <span>总户数</span>
                  <span>监控户数</span>
                  <span>点位个数</span>
                </li>
                <li class="tbody">
                  <p>铁采</p>
                  <span>100</span>
                  <span>19</span>
                  <span>24</span>
                </li>
                <li class="tbody">
                  <p>铁选</p>
                  <span>201</span>
                  <span>119</span>
                  <span>116</span>
                </li>
                <li class="tbody">
                  <p>水泥</p>
                  <span>64</span>
                  <span>61</span>
                  <span>76</span>
                </li>
                <li class="tbody">
                  <p>混凝土</p>
                  <span>191</span>
                  <span>178</span>
                  <span>200</span>
                </li>
                <li class="tbody">
                  <p>行业</p>
                  <span>556</span>
                  <span>877</span>
                  <span>416</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="center-data-main">
          <div class="select-input">
            <select class="input" id="select1">
              <option>唐山市</option>
              <option value="0_0_2_1">唐山市/路南区</option><!-- ', value: 0, value1: 0, value2:0 , value3:1}, //0_0_2_1 -->
              <option value="0_0_0_10">唐山市/路北区</option><!-- ', value: 0, value1:0, value2:0 , value3:10}, //0_0_0_10 -->
              <option value="0_0_4_3">唐山市/古冶区</option><!-- ', value: 0, value1:0, value2:4 , value3:3}, //0_0_4_3 -->
              <option value="3_0_2_12">唐山市/开平区</option><!-- ', value: 3, value1:0, value2:2 , value3:12}, // 3_0_2_12 -->
              <option value="0_0_2_30">唐山市/丰南区</option><!-- ', value: 0, value1:0, value2:1 , value3:30}, //0_0_2_30 -->
              <option value="0_0_30_18">唐山市/丰润区</option><!-- ', value: 0, value1:0, value2:29 , value3:13}, //0_0_30_18 -->
              <option value="0_0_0_17">唐山市/曹妃甸区</option><!-- ', value: 0, value1:0, value2:0 , value3:16}, //0_0_0_17 -->
              <option value="0_1_4_12">唐山市/滦南县</option><!-- ', value: 0, value1:1, value2:3 , value3:12}, //0_1_4_12 -->
              <option value="0_0_1_5">唐山市/乐亭县</option><!-- ', value: 0, value1:0, value2:1 , value3:5}, //0_0_1_5 -->
              <option value="47_15_0_10">唐山市/迁西县</option><!-- ', value: 30, value1:1, value2:10 , value3:0}, // 47_15_0_10 -->
              <option value="0_0_9_14">唐山市/玉田县</option><!-- ', value: 0, value1:0, value2:8 , value3:13}, //0_0_9_14 -->
              <option value="0_0_0_1">唐山市/芦台经济开发区</option><!-- ', value: 0, value1:0, value2:0 , value3:1}, //0_0_0_1 -->
              <option value="65_0_2_11">唐山市/遵化市</option><!-- ', value: 37, value1:0, value2:2 , value3:8}, //65_0_2_11 -->
              <option value="78_39_3_17">唐山市/迁安市</option><!-- ', value: 51, value1:14, value2:3 , value3:17}, // 78_39_3_17 -->
              <option value="8_8_6_15">唐山市/滦州市</option><!-- ', value: 7, value1:2, value2:5 , value3:15}, // 8_8_6_15 -->
              <option value="0_0_0_4">唐山市/高新</option><!--  0 0 0 4 -->
              <option value="0_0_0_2">唐山市/曹经开</option> <!--  0 0 0 2 -->
              <option value="0_0_0_6">唐山市/海港</option> <!--  0 0 0 6 -->
              <option value="0_0_1_3">唐山市/汉沽</option><!--  0 0 0 3 -->
              
              
              
            </select>
          </div>

          <div id="center-data" class="center-data" style="display: none">
            <ul class="data">
              <li>
                <img src="/visual/images/icon_data.png" alt="" />
                <p id="xkP">铁矿选矿企业数</p>
                <span id="xkCount"></span>
              </li>
              <li>
                <img src="/visual/images/icon_data.png" alt="" />
                <p id="ckP">铁矿采矿企业数</p>
                <span id="ckCount"></span>
              </li>
              <li>
                <img src="/visual/images/icon_data.png" alt="" />
                <p id="snP">水泥制造企业数</p>
                <span id="snCount"></span>
              </li>
              <li>
                <img src="/visual/images/icon_data.png" alt="" />
                <p id="nntP">混凝土企业数</p>
                <span id="nntCount"></span>
              </li>
            </ul>
            <div class="data-list">
              <div class="title">分局行业用户数统计</div>
              <ul>
                <li>
                  <div>
                    <img src="/visual/images/icon_3.png" alt="" />
                    <p>
                      <span>石家庄市长安区区税务局</span>
                      第一税务分局
                    </p>
                  </div>
                  <div>
                    <p>铁矿采矿<span>2</span></p>
                    <p>铁矿选矿<span>16</span></p>
                    <p>水泥制造<span>8</span></p>
                    <p>混凝土<span>48</span></p>
                  </div>
                </li>
                <li>
                  <div>
                    <img src="/visual/images/icon_3.png" alt="" />
                    <p>
                      <span>石家庄市长安区区税务局</span>
                      第一税务分局
                    </p>
                  </div>
                  <div>
                    <p>铁矿采矿<span>2</span></p>
                    <p>铁矿选矿<span>16</span></p>
                    <p>水泥制造<span>8</span></p>
                    <p>混凝土<span>48</span></p>
                  </div>
                </li>
                <li>
                  <div>
                    <img src="/visual/images/icon_3.png" alt="" />
                    <p>
                      <span>石家庄市长安区区税务局</span>
                      第一税务分局
                    </p>
                  </div>
                  <div>
                    <p>铁矿采矿<span>2</span></p>
                    <p>铁矿选矿<span>16</span></p>
                    <p>水泥制造<span>8</span></p>
                    <p>混凝土<span>48</span></p>
                  </div>
                </li>
                <li>
                  <div>
                    <img src="/visual/images/icon_3.png" alt="" />
                    <p>
                      <span>石家庄市长安区区税务局</span>
                      第一税务分局
                    </p>
                  </div>
                  <div>
                    <p>铁矿采矿<span>2</span></p>
                    <p>铁矿选矿<span>16</span></p>
                    <p>水泥制造<span>8</span></p>
                    <p>混凝土<span>48</span></p>
                  </div>
                </li>
                <li>
                  <div>
                    <img src="/visual/images/icon_3.png" alt="" />
                    <p>
                      <span>石家庄市长安区区税务局</span>
                      第一税务分局
                    </p>
                  </div>
                  <div>
                    <p>铁矿采矿<span>2</span></p>
                    <p>铁矿选矿<span>16</span></p>
                    <p>水泥制造<span>8</span></p>
                    <p>混凝土<span>48</span></p>
                  </div>
                </li>
                <li>
                  <div>
                    <img src="/visual/images/icon_3.png" alt="" />
                    <p>
                      <span>石家庄市长安区区税务局</span>
                      第一税务分局
                    </p>
                  </div>
                  <div>
                    <p>铁矿采矿<span>2</span></p>
                    <p>铁矿选矿<span>16</span></p>
                    <p>水泥制造<span>8</span></p>
                    <p>混凝土<span>48</span></p>
                  </div>
                </li>
                <li>
                  <div>
                    <img src="/visual/images/icon_3.png" alt="" />
                    <p>
                      <span>石家庄市长安区区税务局</span>
                      第一税务分局
                    </p>
                  </div>
                  <div>
                    <p>铁矿采矿<span>2</span></p>
                    <p>铁矿选矿<span>16</span></p>
                    <p>水泥制造<span>8</span></p>
                    <p>混凝土<span>48</span></p>
                  </div>
                </li>
                <li>
                  <div>
                    <img src="/visual/images/icon_3.png" alt="" />
                    <p>
                      <span>石家庄市长安区区税务局</span>
                      第一税务分局
                    </p>
                  </div>
                  <div>
                    <p>铁矿采矿<span>2</span></p>
                    <p>铁矿选矿<span>16</span></p>
                    <p>水泥制造<span>8</span></p>
                    <p>混凝土<span>48</span></p>
                  </div>
                </li>
                <li>
                  <div>
                    <img src="/visual/images/icon_3.png" alt="" />
                    <p>
                      <span>石家庄市长安区区税务局</span>
                      第一税务分局
                    </p>
                  </div>
                  <div>
                    <p>铁矿采矿<span>2</span></p>
                    <p>铁矿选矿<span>16</span></p>
                    <p>水泥制造<span>8</span></p>
                    <p>混凝土<span>48</span></p>
                  </div>
                </li>
                <li>
                  <div>
                    <img src="/visual/images/icon_3.png" alt="" />
                    <p>
                      <span>石家庄市长安区区税务局</span>
                      第一税务分局
                    </p>
                  </div>
                  <div>
                    <p>铁矿采矿<span>2</span></p>
                    <p>铁矿选矿<span>16</span></p>
                    <p>水泥制造<span>8</span></p>
                    <p>混凝土<span>48</span></p>
                  </div>
                </li>
                <li>
                  <div>
                    <img src="/visual/images/icon_3.png" alt="" />
                    <p>
                      <span>石家庄市长安区区税务局</span>
                      第一税务分局
                    </p>
                  </div>
                  <div>
                    <p>铁矿采矿<span>2</span></p>
                    <p>铁矿选矿<span>16</span></p>
                    <p>水泥制造<span>8</span></p>
                    <p>混凝土<span>48</span></p>
                  </div>
                </li>
                <li>
                  <div>
                    <img src="/visual/images/icon_3.png" alt="" />
                    <p>
                      <span>石家庄市长安区区税务局</span>
                      第一税务分局
                    </p>
                  </div>
                  <div>
                    <p>铁矿采矿<span>2</span></p>
                    <p>铁矿选矿<span>16</span></p>
                    <p>水泥制造<span>8</span></p>
                    <p>混凝土<span>48</span></p>
                  </div>
                </li>
                <li>
                  <div>
                    <img src="/visual/images/icon_3.png" alt="" />
                    <p>
                      <span>石家庄市长安区区税务局</span>
                      第一税务分局
                    </p>
                  </div>
                  <div>
                    <p>铁矿采矿<span>2</span></p>
                    <p>铁矿选矿<span>16</span></p>
                    <p>水泥制造<span>8</span></p>
                    <p>混凝土<span>48</span></p>
                  </div>
                </li>
                <li>
                  <div>
                    <img src="/visual/images/icon_3.png" alt="" />
                    <p>
                      <span>石家庄市长安区区税务局</span>
                      第一税务分局
                    </p>
                  </div>
                  <div>
                    <p>铁矿采矿<span>2</span></p>
                    <p>铁矿选矿<span>16</span></p>
                    <p>水泥制造<span>8</span></p>
                    <p>混凝土<span>48</span></p>
                  </div>
                </li>
                <li>
                  <div>
                    <img src="/visual/images/icon_3.png" alt="" />
                    <p>
                      <span>石家庄市长安区区税务局</span>
                      第一税务分局
                    </p>
                  </div>
                  <div>
                    <p>铁矿采矿<span>2</span></p>
                    <p>铁矿选矿<span>16</span></p>
                    <p>水泥制造<span>8</span></p>
                    <p>混凝土<span>48</span></p>
                  </div>
                </li>
                <li>
                  <div>
                    <img src="/visual/images/icon_3.png" alt="" />
                    <p>
                      <span>石家庄市长安区区税务局</span>
                      第一税务分局
                    </p>
                  </div>
                  <div>
                    <p>铁矿采矿<span>2</span></p>
                    <p>铁矿选矿<span>16</span></p>
                    <p>水泥制造<span>8</span></p>
                    <p>混凝土<span>48</span></p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div id="center-data-fixed" class="center-data-fixed">
            <ul>
              <li>
                <img src="/visual/images/icon_1.png" alt="" />
                <div>
                  税收总额
                  <p id="taxSum"></p>
                </div>
              </li>
              <li>
                <img src="/visual/images/icon_1.png" alt="" />
                <div>
                  查补税款
                  <p>0<span>万元</span></p>
                </div>
              </li>
            </ul>
            <div class="map" id="map"></div>
          </div>
        </div>

        <div class="right-box">
          <div class="echarts-box">
            <div class="common-title">报税产量和监控产量对比</div>
            <div class="common-box">
              <div id="echart4" style="height: 278px"></div>
            </div>
          </div>
          <div class="echarts-box">
            <div class="common-title">税收增长率</div>
            <div class="common-box">
              <div id="fb1" style="height: 278px"></div>
              <div id="fb2" style="height: 278px"></div>
            </div>
          </div>
          <div class="echarts-box">
            <div class="common-title">测算吨耗与实际吨电对比</div>
            <div class="common-box">
              <div id="echart1" style="height: 278px"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      $(document).ready(function () {
        $("#select1").change(function () {
          	
        	var _select = $("#select1").val();
        	if(CoreUtil.isEmpty(_select)){
        		$("#center-data-fixed").fadeIn(300, function () {
              	});
              	$("#center-data").fadeOut(500, function () {
              	});
        	}else{
        		var _selectArr = _select.split("_")
            	$("#xkCount").html(_selectArr[0]);
                $("#ckCount").html(_selectArr[1]);
                $("#snCount").html(_selectArr[2]);
                $("#nntCount").html(_selectArr[3]);
                
                $("#xkP").html("选矿企业总数");
                $("#ckP").html("采矿企业总数");
                $("#snP").html("水泥企业总数");
                $("#nntP").html("混凝土企业总数");
                
                
        		$("#center-data-fixed").fadeOut(300, function () {
              	});
              	$("#center-data").fadeIn(500, function () {
              	});
        	}
        	
        });
        warningList();
        carouselImageList();
        
      });

      var laydate = layui.laydate;
      layui.use(["table", "layer", "laydate"], function () {
        laydate.render({
          elem: "#createTimeInput",
          type: "month",
          range: "至",
          done: function (value, date, endDate) {
            if (value != null && value != undefined && value != "") {
              startTime = value.split("至")[0];
              endTime = value.split("至")[1];
            } else {
              startTime = null;
              endTime = null;
            }
          },
        });
      });
      
      $("#createTimeInput").val('2025-01 至 2025-04');
      
      
      
      
      //轮播图
      let currentIndex = 0;
      const images = $(".carousel");
      const totalImages = images.length; // 图片总数
      images[currentIndex].style.display = "block"; // 显示第一张图片
      function nextImage() {
        images[currentIndex].style.display = "none"; // 隐藏当前图片
        currentIndex = (currentIndex + 1) % totalImages; // 计算下一张图片的索引，循环显示图片
        images[currentIndex].style.display = "block"; // 显示下一张图片
        var alt = images[currentIndex].alt;
        let arr = alt.split("_");
        $("#imgName").html(arr[0]);
        $("#imgTime").html("时间：" + arr[1]);
      }

      // 设置自动播放，例如每3秒切换一次图片
      setInterval(nextImage, 3000); // 3000毫秒后调用nextImage函数，实现自动播放效果。
      
      function carouselImageList(deptId,industry){
    	  var map = {
    		deptId:deptId,
			industry:industry,
			page:1,
			limit:1000,
    	  };
    	  CoreUtil.sendPost("/visual/main/carouselImageList",map,function (res) {
	      	    if(res.code == 0){
	      	    	var records = res.data.records;
					var tmp = "";
					for(var i in records){
						var image = records[i].image;
						var time = records[i].time;
						var nrEndangerName = records[i].nrEndangerName;
						tmp += "<a href="+image+" data-lightbox='image-1' data-title='我的标题'>"
			        		+  "<img alt='"+nrEndangerName+"_"+time+"' class='carousel' src="+image+" style='width: 100%;height: 1.4rem'>"
			        		+  "</a>";
					}
					$("#carouselImageListId").html(tmp);
	      	    }else{
	      	    	console.log("carouselImageList加载失败" + res.msg);
	      	    }
	      });
      }
      
	  function warningList(deptId,industry){
    	  var map = {
			deptId:deptId,
			industry:industry,
			page:1,
			limit:1000,
		  };
		  CoreUtil.sendPost("/visual/main/warningList",map,function (res) {
			  if(res.code == 0){
				var records = res.data.records;
				var tmp = "";
				for(var i in records){
					var stationName = records[i].stationName;
					var createTime = records[i].createTime;
					var camId = records[i].camId;
					tmp += "<li><p><span>【摄像头变动】</span>"+stationName+"企业</p>  "+createTime+" </li>";
				}
				$("#warningListId").html(tmp);
			  }else{
	      	   	console.log("warningList加载失败" + res.msg);
	      	  }
		  });
      }
      
	  function cx(){
		  echarts_1();
		  echarts_31();
		  echarts_4();
	  }
    </script>
  </body>
</html>
